// 柱状图组件
import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

// 1、把功能代码都放到该组件中
// 2、把可变部分抽象成props参数

export const BarChart = ({ title }) => {
    const chartRef = useRef(null)
    useEffect(() => {
        const chartDom = chartRef.current
        const myChart = echarts.init(chartDom)

        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'bar'
                }
            ]
        };
        option && myChart.setOption(option)
    }, [])
    return <div ref={chartRef} style={{ height: '400px', width: '500px' }} />
}